<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<style>
		/* 取消默认样式 */
		* {
			padding: 0px;
			margin: 0px;
		}
		.container {
			width: 100%;
			height: 540px;
			border: 1px solid red;
			display: flex;
			align-items: center;
			align-content: center;
			flex-wrap: wrap;
			justify-content: center;
		}
		.container .box {
			width: 290px;
			height: 450px;
			border: 1px solid #d4d4d4;
            /* border: 1px solid black; */
		}

		.container .box .type {
			width: 100%;
			height: 90px;
			border: 1px solid #d4d4d4;
			background-color: #e4e4e4;
			font-size: 21px;
			font-weight: 500;
            /* 行高保证与高一致才能实现垂直居中 */
            line-height: 90px;
            text-align: center;
		}
		.box .mess {
			width: 100%;
			/* height: 80%; */
            height:432px;
			/* text-align: center; */
			/* border: 1px solid black; */
		}

		.mess > p {
			width: 245px;
			height: 20%;
			/* border: 1px solid black; */
			font-size: 13px;
			color: #595959;
			margin: auto;
			overflow: hidden;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.mess .ch {
			width: 245px;
			height: 75px;
			/* border: 1px solid blue; */
			display: flex;
			background-color: #f7f7f7;
			margin: 40px auto;
		}

		.ch > div {
			/* 结合父容器flex实现三等分 */
			flex: 1;
			/* border: 1px solid black; */
			text-align: center;
			margin: auto;
		}

		.ch > div > .c_color > span {
			font-size: 22px;
		}

		.ch > div > text2 {
			color: #929292;
			font-size: 12px;
		}

		.mess > div {
			margin: 20px;
			/* border: 1px solid green; */
			text-align: center;
		}
		.mess > div > span {
			color: #c3783e;
			font-size: 21px;
		}

		.mess > div > money {
			font-size: 12px;
		}

		.mess > button {
			width: 180px;
			height: 40px;
			border: 1px solid #c17843;
			display: block;
			color: #c17843;
			background-color: #fff;
			margin: auto;
		}

        /* hover改变 */
        .container .box:hover{
            height: 490px;
            border: 1px solid #00aaff;
        }
        .container .box:hover .type{
            background-color: #00aaff;
            height:110px;
            line-height: 110px;
        }
        .container .box:hover  .type>text {
            color:white;
        }
        .container .box:hover .mess .ch > div > .c_color{
            color:#1aa1e1;
        }
	</style>
	<body>
		<div class="container">
			<div class="box">
				<div class="type"><text>入门型</text></div>
				<div class="mess">
					<p>
						适用于个人网站初始阶段并发访问量小，经济配置省钱适用，两步购买方便快捷
					</p>
					<div class="ch">
						<div>
							<div class="c_color"><span>1</span>核</div>
							<text2>CPU</text2>
						</div>
						<div>
							<div class="c_color"><span>1</span>G</div>
							<text2>内存</text2>
						</div>
						<div>
							<div class="c_color"><span>1</span>M</div>
							<text2>带宽</text2>
						</div>
					</div>
					<div><span>49</span><money>元/月起</money></div>
					<button>立即选购</button>
				</div>
			</div>
			<div class="box">
				<div class="type"><text>入门型</text></div>
				<div class="mess">
					<p>
						适用流量适中的网站应用，或简单开发环境、代码存储库等
					</p>
					<div class="ch">
						<div>
							<div class="c_color"><span>2</span>核</div>
							<text2>CPU</text2>
						</div>
						<div>
							<div class="c_color"><span>2</span>G</div>
							<text2>内存</text2>
						</div>
						<div>
							<div class="c_color"><span>5</span>M</div>
							<text2>带宽</text2>
						</div>
					</div>
					<div><span>195</span><money>元/月起</money></div>
					<button>立即选购</button>
				</div>
			</div>
            <div class="box">
				<div class="type"><text>入门型</text></div>
				<div class="mess">
					<p>
						计算能力满足90%云计算使用者需求，适合企业运营活动、并行计算应用
					</p>
					<div class="ch">
						<div>
							<div class="c_color"><span>4</span>核</div>
							<text2>CPU</text2>
						</div>
						<div>
							<div class="c_color"><span>4</span>G</div>
							<text2>内存</text2>
						</div>
						<div>
							<div class="c_color"><span>10</span>M</div>
							<text2>带宽</text2>
						</div>
					</div>
					<div><span>487</span><money>元/月起</money></div>
					<button>立即选购</button>
				</div>
			</div>
            <div class="box">
				<div class="type"><text>入门型</text></div>
				<div class="mess">
					<p>
						适合对计算性能要求较高的应用场景，如企业运营活动、批量处理、分布式分析、游戏app等
					</p>
					<div class="ch">
						<div>
							<div class="c_color"><span>8</span>核</div>
							<text2>CPU</text2>
						</div>
						<div>
							<div class="c_color"><span>8</span>G</div>
							<text2>内存</text2>
						</div>
						<div>
							<div class="c_color"><span>10</span>M</div>
							<text2>带宽</text2>
						</div>
					</div>
					<div><span>681</span><money>元/月起</money></div>
					<button>立即选购</button>
				</div>
			</div>
	</body>
</html>
